<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>工装车明细打印</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        /* 添加横向打印样式 */
        @media print {
            @page {
                size: A4 landscape;
                margin: 0;
            }

            body {
                margin: 0;
                padding: 0;
            }

            .a4-page {
                width: 297mm;
                height: 210mm;
                margin: 0 auto;
                padding: 10mm;
                box-shadow: none;
                page-break-after: always;
            }
        }
    </style>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</head>
<body>
    <button onclick="printPage()" class="print-button">打印全部</button>

    {% for cart in cart_details %}
    <div class="a4-page">
        <div class="header">
            <div class="title-section">
                <h1>顺引单明细</h1>
                <div class="qr-code">
                    <img src="data:image/png;base64,{{ cart.qr_code | b64encode }}" alt="二维码">
                </div>
            </div>

            <div class="info-box">
                <div class="info-item">
                    <span class="label">工装车号:</span>
                    <span class="value">{{ cart.cart_num }}</span>
                </div>
                <div class="info-item">
                    <span class="label">单号:</span>
                    <span class="value">{{ cart.danhao }}</span>
                </div>
                <div class="info-item">
                    <span class="label">生成日期:</span>
                    <span class="value">{{ now.strftime('%Y-%m-%d %H:%M') }}</span>
                </div>
                <div class="info-item">
                    <span class="label">总记录数:</span>
                    <span class="value">{{ cart.details|length }}</span>
                </div>
            </div>
        </div>

        <div class="table-container">
            <table class="detail-table">
                <colgroup>
                    <col width="9%">
                    <col width="7%">
                    <col width="16%">
                    <col width="18%">
                    <col width="6%">
                    <col width="13%">
                    <col width="13%">
                    <col width="13%">
                    <col width="5%">
                </colgroup>
                <thead>
                    <tr>
                        <th width="8%">总装连号</th>
                        <th width="6%">项目</th>
                        <th width="16%">物料编码</th>
                        <th width="16%">物料名称</th>
                        <th width="6%">数量</th>
                        <th width="12%">车身号</th>
                        <th width="14%">上线日期</th>
                        <th width="14%">需求时间</th>
                        <th width="8%">排序</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in cart.details %}
                    <tr>
                        <td>{{ item.总装连号 }}</td>
                        <td>{{ item.项目 }}</td>
                        <td>{{ item.物料编码 }}</td>
                        <td>{{ item.物料名称 }}</td>
                        <td>{{ item.该车采购数量 }}</td>
                        <td>{{ item.车身号 }}</td>
                        <td>
                            {% if item.总装上线日期 is string %}
                                {{ item.总装上线日期 }}
                            {% else %}
                                {{ item.总装上线日期.strftime('%Y-%m-%d %H:%M') }}
                            {% endif %}
                        </td>
                        <td>
                            {% if item.物料需求时间 is string %}
                                {{ item.物料需求时间 }}
                            {% else %}
                                {{ item.物料需求时间.strftime('%Y-%m-%d %H:%M') }}
                            {% endif %}
                        </td>
                        <td>{{ item.排序 }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="footer">
            <div class="material-summary">
                <div class="summary-grid">
                    {% for material_code, summary in cart.material_summary.items() %}
                    <div class="summary-item">
                        <span class="material-code">{{ material_code }}&{{ summary.quantity }}个</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</body>
</html>